/*------------------------------------
list group
------------------------------------*/

.list-group-right-arrow {
  a {
    position: relative;
    &:after {
      font-family: "fontawesome";
      font-size: 14px;
      position: absolute;
      top: 30%;
      right: 20px;
      content: "\f105";
      width: 25px;
      height: 25px;
      line-height: 23px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid $border-color;
      padding-left: 2px;
    }
    &:hover {
      &:after {
        background: $primary-color;
        border-color: $primary-color;
        color: $white;
        transition: all 0.3s;
      }
    }
  }
  .list-group-item.active {
    background: $white;
    border-color: $border-color;
    color: $primary-color;
    &:after {
      background: $primary-color;
      border-color: $primary-color;
      color: $white;
    }
  }
}

.list-group-right-arrow-on-hover {
  a {
    &:after {
      opacity: 0;
      right: 13px;
      top: 33%;
      border: 3px solid $white;
      width: 30px;
      height: 30px;
      line-height: 25px;
    }
    &:hover {
      &:after {
        opacity: 1;
        right: -13px;
        border: 3px solid $white;
        width: 30px;
        height: 30px;
        line-height: 25px;
      }
    }
  }
  .list-group-item.active {
    &:after {
      opacity: 1;
      right: -13px;
      border: 3px solid $white;
      width: 30px;
      height: 30px;
      line-height: 25px;
    }
  }
}

.list-group {
  .list-group-item {
    h6 {
      color: $dark;
    }
    &:hover {
      h6 {
        color: $primary-color;
      }
    }
  }
}

.list-group-gap {
  .list-group-item {
    margin-bottom: 10px;
    border-radius: 6px;
    padding: 1.8rem 1.25rem;
  }
}

@media (prefers-color-scheme: dark) {
  .list-group-item {
    background-color: #1b1b1b;
    color: $dark-mode-fg;
    border-color: $dark-mode-border-color;
  }
}

// list

.custom-list {
  list-style: none;
  padding: 0;
  li {
    padding: 0.8rem 0;
    a {
      color: $dark;
      &:hover {
        color: $primary-color;
        text-decoration: none;
      }
    }
  }
}

.custom-list-border {
  li {
    border-bottom: 1px solid $border-color;
  }
  li:first-child {
    border-top: 1px solid $border-color;
  }
}

@media (prefers-color-scheme: dark) {
  .list-group-item {
    background-color: darken($color: $dark-mode-canvas-color, $amount: 8%);
    color: $dark-mode-fg;
    border-color: $dark-mode-border-color;
  }
}
